<template>
  <div class="policy">
    <!-- <Navdar :titleText="title"></Navdar> -->
    <div class="blockDiv">
      <el-row style="display:flex;justify-content: space-between;">
        <el-col :span="5"><div class="grid-content bg-purple">
          <el-card>
            <h2>测评总次数</h2>
            <el-tag>{{data.scale.open}}</el-tag>
          </el-card>
        </div></el-col>
        <el-col :span="5"><div class="grid-content bg-purple">
          <el-card>
            <h2>测评完成次数</h2>
            <el-tag>{{data.scale.completed}}</el-tag>
          </el-card>
        </div></el-col>
        <el-col :span="5"><div class="grid-content bg-purple">
          <el-card>
            <h2>冥想总次数</h2>
            <el-tag>{{data.meditate.listen}}</el-tag>
          </el-card>
        </div></el-col>
        <el-col :span="5"><div class="grid-content bg-purple">
          <el-card>
            <h2>来信数总数</h2>
            <el-tag>{{data.letter}}</el-tag>
            
          </el-card>
        </div></el-col>
      </el-row>
      <el-row style="display:flex;justify-content: space-between;margin-top: 20px;">
        <el-col :span="5"><div class="grid-content bg-purple">
          <el-card>
            <h2>图文咨询次数</h2>
            <el-tag>{{data.advisory.text_count}}</el-tag>
          </el-card>
        </div></el-col>
        <el-col :span="5"><div class="grid-content bg-purple">
          <el-card>
            <h2>图文咨询总服务时长</h2>
            <el-tag>{{data.advisory.text_duration}}</el-tag>
          </el-card>
        </div></el-col>
        <el-col :span="5"><div class="grid-content bg-purple">
          <el-card>
            <h2>语音咨询次数</h2>
            <el-tag>{{data.advisory.voice_count}}</el-tag>
          </el-card>
        </div></el-col>
        <el-col :span="5"><div class="grid-content bg-purple">
          <el-card>
            <h2>语音咨询总服务时长</h2>
            <el-tag>{{data.advisory.voice_duration}}</el-tag>
            
          </el-card>
        </div></el-col>
      </el-row>
      <el-row style="display:flex;justify-content: space-between;margin-top: 40px;">
        <el-col :span="11"><div class="grid-content bg-purple">
          <el-card shadow="never">
            <h2>登陆统计</h2>
            <el-date-picker
              v-model="loginTime"
              type="daterange"
              value-format="timestamp"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期" @change="getLoginData">
            </el-date-picker>
            <el-select v-model="login" placeholder="请选择" @change="getLoginData">
              <el-option label="时" value="hour"></el-option>
              <el-option label="天" value="day"></el-option>
              <el-option label="月" value="month"></el-option>
            </el-select>
            <echarts-new :option-data="loginData" :styles="style" height="100%" width="100%"/>
          </el-card>
        </div></el-col>
        <el-col :span="11"><div class="grid-content bg-purple">
          <el-card shadow="never">
            <h2>咨询统计</h2>
            <el-date-picker
              v-model="advisoryTime"
              type="daterange"
              value-format="timestamp"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期" @change="getAdvisoryData">
            </el-date-picker>
            <el-select v-model="advisory" placeholder="请选择" @change="getAdvisoryData">
              <el-option label="时" value="hour"></el-option>
              <el-option label="天" value="day"></el-option>
              <el-option label="月" value="month"></el-option>
            </el-select>
            <echarts-new :option-data="infoData" :styles="style" height="100%" width="100%"/>
          </el-card>
        </div></el-col>
      </el-row>
      <el-row style="display:flex;justify-content: space-between;margin-top: 40px;">
        <el-col :span="11"><div class="grid-content bg-purple">
          <el-card shadow="never">
            <h2>测评分类统计的数值</h2>
            <echarts-new :option-data="optionData" :styles="style" height="100%" width="100%"/>
          </el-card>
        </div></el-col>
        <el-col :span="11"><div class="grid-content bg-purple">
          <el-card shadow="never">
            <h2>冥想分类统计的数值</h2>
            <echarts-new :option-data="optionDatas" :styles="style" height="100%" width="100%"/>
          </el-card>
        </div></el-col>
      </el-row>
    </div>
  </div>

</template>

<script>
import {
  statisticsLogin,
  statistics,
  statisticsAdvisory
} from "@/api"
import Navdar from '@/components/navbar/navbar'
import {parseTime} from "@/utils";
import echartsNew from "@/components/echartsNew/index";
export default {
  name: "index",
  components: {
    Navdar,
    echartsNew
  },
  data() {
    return {
      title:'首页',
      adminList:[
        {type:'userTotal',icon:'/img/user.png',num:'0',name:'来信数总数',text:'平台注册微信用户总数'},
        {type:'carTotal',icon:'/img/carNum.png',num:'0',name:'新增用户',text:'近7日新增用户数量'},
        {type:'carLibraryList',icon:'/img/carTypeNum.png',num:'0',name:'进场数',text:'近7日进场数量'},
        // {type:'orderTotal',icon:'/img/num.png',num:'0',name:'离场数',text:'近7日离场数量'},
      ],
      orderInfo:{},
      reviewedTotalNum:'',   // 待审核信息统计
      carAuditList:[],    // 车辆待审核列表
      salesTotalNum:'0',     // 总销售额
      monthlyTotalNum:'0',     // 月销售额
      monthlyTotalPct:'0',     // 月销售额百分比
      yearTotalNum:'0',      // 年销售额
      yearTotalPct:'0',      // 年销售额百分比
      btnAudit:true,   // 按钮权限
      optionData: {},
      optionDatas: {},
      loginData: {},
      infoData: {},
      style: { height: "300px" },
      data:{},

      loginTime:[],
      advisoryTime:[],
      advisory:'day',
      login:'day'
    };
  },
  mounted() {
    this.loginTime=[this.getDay(-6),this.getDay(0)]
    this.advisoryTime=[this.getDay(-6),this.getDay(0)]
    this.getTrend()
    this.getInfo()
    this.getLoginData()
    this.getAdvisoryData()
    
    
  },
  methods: {
    // 按钮权限
    // getBtns(){
    //   let UserManager = JSON.parse(sessionStorage.getItem('BtnPermission'))
    //   for (var i = 0; i < UserManager.length; i++) {
    //     var name = UserManager[i];
    //     // console.log(name);
    //     switch (name) {
    //       case 'homeGoAudit'://场馆引流查询
    //         this.btnAudit=true;
    //         break;
    //       // case 'dataDetails'://场馆引流数据明细
    //       //   this.datailsBtn=true;
    //       //   break;
    //     }
    //   }
    // },
    getDay(day){ 
      var today = new Date(); 
      var targetday_milliseconds=today.getTime() + 1000*60*60*24*day;
      console.log('时间',new Date(targetday_milliseconds))
      // this.loginTime.push(new Date(targetday_milliseconds))
      // this.loginTime.push(new Date(targetday_milliseconds))
      return new Date(targetday_milliseconds)
      // today.setTime(targetday_milliseconds);
    },
    getAdvisoryData(){
      statisticsAdvisory({
        start:parseInt(new Date(this.loginTime[0]).getTime()/1000),
        end:parseInt(new Date(this.loginTime[1]).getTime()/1000),
        interval:this.advisory,
      }).then(res=>{
        console.log(res)
        let list =[]
        for(let key in res.data){
          console.log(key)
          let obj={
            time:key,
            num:res.data[key]
          }
          list.push(obj)
        }
        console.log(list)
        let xAxis = new Array();
              let series = [
                {"name": "数量", "data":[],"type": "line","smooth": "true","yAxisIndex": 0},
                // {"name": "打开次数", "data":[],"type": "line", "smooth": "true","yAxisIndex": 0},
                // {"name": "充值金额","data":[],"type": "line", "smooth": "true", "yAxisIndex": 0},
                // {"name": "支出金额", "data":[], "type": "line", "smooth": "true","yAxisIndex": 0}
              ];
              xAxis = list.map((item)=>{
                console.log(item)
                return item.time
              })
              series[0].data = list.map((item)=>{
                return item.num
              })
              // series[2].data = list.scale.map((item)=>{
              //   return item.rechargeAmount
              // })
              // series[3].data = list.scale.map((item)=>{
              //   return item.payoutAmount
              // })
              this.spinShow = true;
              let legend = series.map((item) => {
                return item.name;
              });
            let col = ["#B37FEB", "#FFAB2B", "#1890FF", "#00C050"];
              series.map((item, index) => {
                item.itemStyle = {
                  normal: {
                    color: col[index],
                  },
                };
              });
            this.infoData = {
              tooltip: {
                  trigger: 'axis',
                  axisPointer: {
                      type: 'cross',
                      label: {
                          backgroundColor: '#6a7985'
                      }
                  }
              },
              legend: {
                  x:'center',
                  data: legend
              },
              grid: {
                  left: '3%',
                  right: '4%',
                  bottom: '3%',
                  containLabel: true
              },
              toolbox: {
                  feature: {
                      saveAsImage: {}
                  }
              },
              xAxis: {
                  type: 'category',
                  boundaryGap: true,
                  // axisTick:{
                  //     show:false
                  // },
                  // axisLine:{
                  //     show:false
                  // },
                  // splitLine: {
                  //     show: false
                  // },
                  axisLabel: {
                      interval: Math.floor(list.length / 10),
                      rotate: 40,
                      textStyle: {
                          color: '#000000'
                      }
                  },
                  data: xAxis
              },
              yAxis: {
                  type: 'value',
                  axisLine: {
                      show: false    
                  },
                  axisTick: {
                      show: false
                  },
                  axisLabel: {
                      textStyle: {
                          color: '#7F8B9C'
                      }
                  },
                  splitLine: {
                      show: true,
                      lineStyle: {
                          color: '#F5F7F9'
                      }
                  }
                },
                series: series
              }
              this.spinShow = false;
      })
    },
    getLoginData(){
      
      console.log(this.loginTime)
      statisticsLogin({
        start:parseInt(new Date(this.loginTime[0]).getTime()/1000),
        end:parseInt(new Date(this.loginTime[1]).getTime()/1000),
        interval:this.login,
      }).then(res=>{
        console.log(res)
        let list =[]
        for(let key in res.data){
          console.log(key)
          let obj={
            time:key,
            num:res.data[key]
          }
          list.push(obj)
        }
        console.log(list)
        let xAxis = new Array();
              let series = [
                {"name": "数量", "data":[],"type": "line","smooth": "true","yAxisIndex": 0},
                // {"name": "打开次数", "data":[],"type": "line", "smooth": "true","yAxisIndex": 0},
                // {"name": "充值金额","data":[],"type": "line", "smooth": "true", "yAxisIndex": 0},
                // {"name": "支出金额", "data":[], "type": "line", "smooth": "true","yAxisIndex": 0}
              ];
              xAxis = list.map((item)=>{
                console.log(item)
                return item.time
              })
              series[0].data = list.map((item)=>{
                return item.num
              })
              // series[2].data = list.scale.map((item)=>{
              //   return item.rechargeAmount
              // })
              // series[3].data = list.scale.map((item)=>{
              //   return item.payoutAmount
              // })
              this.spinShow = true;
              let legend = series.map((item) => {
                return item.name;
              });
            let col = ["#B37FEB", "#FFAB2B", "#1890FF", "#00C050"];
              series.map((item, index) => {
                item.itemStyle = {
                  normal: {
                    color: col[index],
                  },
                };
              });
            this.loginData = {
              tooltip: {
                  trigger: 'axis',
                  axisPointer: {
                      type: 'cross',
                      label: {
                          backgroundColor: '#6a7985'
                      }
                  }
              },
              legend: {
                  x:'center',
                  data: legend
              },
              grid: {
                  left: '3%',
                  right: '4%',
                  bottom: '3%',
                  containLabel: true
              },
              toolbox: {
                  feature: {
                      saveAsImage: {}
                  }
              },
              xAxis: {
                  type: 'category',
                  boundaryGap: true,
                  // axisTick:{
                  //     show:false
                  // },
                  // axisLine:{
                  //     show:false
                  // },
                  // splitLine: {
                  //     show: false
                  // },
                  axisLabel: {
                      interval: Math.floor(list.length / 10),
                      rotate: 40,
                      textStyle: {
                          color: '#000000'
                      }
                  },
                  data: xAxis
              },
              yAxis: {
                  type: 'value',
                  axisLine: {
                      show: false    
                  },
                  axisTick: {
                      show: false
                  },
                  axisLabel: {
                      textStyle: {
                          color: '#7F8B9C'
                      }
                  },
                  splitLine: {
                      show: true,
                      lineStyle: {
                          color: '#F5F7F9'
                      }
                  }
                },
                series: series
              }
              this.spinShow = false;
      })
    },
    getInfo(){
      statistics({}).then(res=>{
        console.log(res)
        let list = res.data
        let xAxis = new Array();
              let series = [
                {"name": "冥想次数", "data":[],"type": "line","smooth": "true","yAxisIndex": 0},
                // {"name": "打开次数", "data":[],"type": "line", "smooth": "true","yAxisIndex": 0},
                // {"name": "充值金额","data":[],"type": "line", "smooth": "true", "yAxisIndex": 0},
                // {"name": "支出金额", "data":[], "type": "line", "smooth": "true","yAxisIndex": 0}
              ];
              xAxis = list.meditate.categories.map((item)=>{
                return item.category_name
              })
              series[0].data = list.meditate.categories.map((item)=>{
                return item.listen
              })
              // series[2].data = list.scale.map((item)=>{
              //   return item.rechargeAmount
              // })
              // series[3].data = list.scale.map((item)=>{
              //   return item.payoutAmount
              // })
              this.spinShow = true;
              let legend = series.map((item) => {
                return item.name;
              });
            let col = ["#B37FEB", "#FFAB2B", "#1890FF", "#00C050"];
              series.map((item, index) => {
                item.itemStyle = {
                  normal: {
                    color: col[index],
                  },
                };
              });
            this.optionDatas = {
              tooltip: {
                  trigger: 'axis',
                  axisPointer: {
                      type: 'cross',
                      label: {
                          backgroundColor: '#6a7985'
                      }
                  }
              },
              legend: {
                  x:'center',
                  data: legend
              },
              grid: {
                  left: '3%',
                  right: '4%',
                  bottom: '3%',
                  containLabel: true
              },
              toolbox: {
                  feature: {
                      saveAsImage: {}
                  }
              },
              xAxis: {
                  type: 'category',
                  boundaryGap: true,
                  // axisTick:{
                  //     show:false
                  // },
                  // axisLine:{
                  //     show:false
                  // },
                  // splitLine: {
                  //     show: false
                  // },
                  axisLabel: {
                      interval: 0,
                      rotate: 40,
                      textStyle: {
                          color: '#000000'
                      }
                  },
                  data: xAxis
              },
              yAxis: {
                  type: 'value',
                  axisLine: {
                      show: false    
                  },
                  axisTick: {
                      show: false
                  },
                  axisLabel: {
                      textStyle: {
                          color: '#7F8B9C'
                      }
                  },
                  splitLine: {
                      show: true,
                      lineStyle: {
                          color: '#F5F7F9'
                      }
                  }
                },
                series: series
              }
              this.spinShow = false;
            
      })
    },
    getTrend() {
      statistics({}).then(res=>{
        this.data = res.data
        let list = res.data
        console.log(list)
              let xAxis = new Array();
              let series = [
                {"name": "测评完成次数", "data":[],"type": "line","smooth": "true","yAxisIndex": 0},
                {"name": "打开次数", "data":[],"type": "line", "smooth": "true","yAxisIndex": 0},
                // {"name": "充值金额","data":[],"type": "line", "smooth": "true", "yAxisIndex": 0},
                // {"name": "支出金额", "data":[], "type": "line", "smooth": "true","yAxisIndex": 0}
              ];
              xAxis = list.scale.categories.map((item)=>{
                return item.category_name
              })
              series[0].data = list.scale.categories.map((item)=>{
                return item.completed
              })
              series[1].data = list.scale.categories.map((item)=>{
                return item.open
              })
              // series[2].data = list.scale.map((item)=>{
              //   return item.rechargeAmount
              // })
              // series[3].data = list.scale.map((item)=>{
              //   return item.payoutAmount
              // })
              this.spinShow = true;
              let legend = series.map((item) => {
                return item.name;
              });
            let col = ["#B37FEB", "#FFAB2B", "#1890FF", "#00C050"];
              series.map((item, index) => {
                item.itemStyle = {
                  normal: {
                    color: col[index],
                  },
                };
              });
            this.optionData = {
              tooltip: {
                  trigger: 'axis',
                  axisPointer: {
                      type: 'cross',
                      label: {
                          backgroundColor: '#6a7985'
                      }
                  }
              },
              legend: {
                  x:'center',
                  data: legend
              },
              grid: {
                  left: '3%',
                  right: '4%',
                  bottom: '3%',
                  containLabel: true
              },
              toolbox: {
                  feature: {
                      saveAsImage: {}
                  }
              },
              xAxis: {
                  type: 'category',
                  boundaryGap: true,
                  // axisTick:{
                  //     show:false
                  // },
                  // axisLine:{
                  //     show:false
                  // },
                  // splitLine: {
                  //     show: false
                  // },
                  axisLabel: {
                      interval: 0,
                      rotate: 40,
                      textStyle: {
                          color: '#000000'
                      }
                  },
                  data: xAxis
              },
              yAxis: {
                  type: 'value',
                  axisLine: {
                      show: false    
                  },
                  axisTick: {
                      show: false
                  },
                  axisLabel: {
                      textStyle: {
                          color: '#7F8B9C'
                      }
                  },
                  splitLine: {
                      show: true,
                      lineStyle: {
                          color: '#F5F7F9'
                      }
                  }
                },
                series: series
              }
              this.spinShow = false;
            })
          },
    // 条船信息管理
    back(){
      this.$router.push('/advertisement/advertisement')
    },
    // 搜索
    search(){

    },
    select(){

    },
    changep(){

    }
  }
};
</script>

<style scoped lang="scss">
.policy {
  padding: 40px 80px;
  padding-top: 0;
  overflow: auto;
  .blockDiv{
    background:#fff;
    padding:10px;
    border-radius:10px;
    //width: 100%;
    //overflow: hidden;
    //display: flex;
    padding-top: 20px;
    .left{
      width: 495px;
      //height: 866px;
      //background: pink;
      //overflow-y: scroll;
      .item{
        width: 445px;
        height: 200px;
        //background: #FFFFFF;
        background-image: url("/img/tag.png");
        background-size: 100% 100%;
        margin-bottom: 65px;
        padding: 0px 60px 0px 35px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        img{
          width: 69px;
          height: 69px;
          overflow: hidden;
          border-radius: 50%;
        }
        .text1{
          margin-left: 10px;
          .title{
            font-size: 20px;
            font-family: 'PingFangSC-Semibold, PingFang SC';
            font-weight: 600;
            color: #000000;
            line-height: 30px;
          }
          .sum{
            font-size: 10px;
            font-family: 'PingFangSC-Regular, PingFang SC';
            font-weight: 400;
            color: #000000;
            line-height: 14px;
          }
        }
        .num{
          font-size: 32px;
          font-family: 'Helvetica-Bold, Helvetica';
          font-weight: bold;
          color: #000000;
          line-height: 45px;
        }
      }
    }
    .right{
      width: 100%;
      //height: 500px;
      //background: red;
      height: calc(100vh - 85px);
      padding: 0 50px;
      //overflow: auto;
      .auditInfo{
        .bg{
          margin-left: 66px;
          height: 385px;
          background: #FFFFFF;
          border-radius: 20px;
        }
        .content{
          float: left;
          width: 100%;
          padding: 40px 40px 35px 0px;
          .top{
            display: flex;
            justify-content: space-between;
            .top_title{
              font-size: 35px;
              font-family: 'PingFangSC-Semibold, PingFang SC';
              font-weight: 600;
              color: #000000;
              line-height: 49px;
            }
            .back{
              width: 42px;
              height: 42px;
              //background: #0C2480;
              border-radius: 10px;
            }
          }
          .botton{
            display: flex;
            justify-content: space-between;
            .botton_left{
              width: 360px;
              height: 198px;
              margin-top: 40px;
              background: #FFE4A9;
              border-radius: 20px;
              padding: 35px 42px;
              position: relative;
              div:nth-child(1){
                font-size: 44px;
                font-family: Helvetica-Bold, Helvetica;
                font-weight: bold;
                color: #623E00;
                line-height: 53px;
              }
              div:nth-child(2){
                font-size: 18px;
                font-family: PingFangSC-Semibold, PingFang SC;
                font-weight: 600;
                color: #623E00;
                line-height: 25px;
                margin-top: 23px;
              }
              div:nth-child(3){
                font-size: 12px;
                font-family: PingFangSC-Semibold, PingFang SC;
                font-weight: 600;
                color: #623E00;
                line-height: 17px;
                opacity: 0.5;
              }
              .carImg{
                position: absolute;
                bottom: -5px;
                right: -20px;
                width: 130px;
                img{
                  width: 100%;
                }
              }
            }
            .list{
              width: 50%;
              .Litem{
                background: #E5ECF5;
                border-radius: 10px;
                margin-bottom: 10px;
                //opacity: 0.4;
                padding: 10px 25px;
                display: flex;
                justify-content: space-between;
                align-items: center;
                .userName{
                  display: flex;
                  align-items: center;
                  img{
                    width: 42px;
                    height: 42px;
                    border-radius: 50%;
                  }
                  div{
                    font-size: 18px;
                    font-family: PingFangSC-Regular, PingFang SC;
                    font-weight: 400;
                    color: #000000;
                    //line-height: 25px;
                    margin-left: 23px;
                  }
                }
                .time{
                  font-size: 14px;
                  font-family: PingFangSC-Regular, PingFang SC;
                  font-weight: 400;
                  color: #000;
                  //line-height: 20px;
                }
              }
            }
          }
        }
      }

      .market{
        padding: 0px 0 30px 30px;
        .text2{
          font-size: 35px;
          font-family: PingFangSC-Semibold, PingFang SC;
          font-weight: 600;
          color: #000000;
          // line-height: 49px;
          padding: 28px;
        }
        .box{
          background: #FFFFFF;
          border-radius: 20px;
          padding: 30px 37px 30px 40px;
          .totalSales{
            padding: 25px 0 30px 0;
            .TS_title{
              font-size: 18px;
              font-family: PingFangSC-Semibold, PingFang SC;
              font-weight: 600;
              color: #666666;
              margin-bottom: 15px;
            }
            .money{
              font-size: 44px;
              font-family: PingFangSC-Semibold, PingFang SC;
              font-weight: 600;
              color: #000000;
              line-height: 62px;
              padding: 8px;
            }
            .schedule{
              padding-top: 30px;
              .S_num{
                display: flex;
                justify-content: space-between;
                padding:10px 0;
              }
              .stripBg{
                background: #F0F0F0;
                height: 6px;
                border-radius: 6px;
                .strip{
                  background: #95B974;
                  width: 70%;
                  height: 6px;
                  border-radius: 6px;
                }
                .yearStrip{
                  background: #F7C25B;
                  width: 30%;
                  height: 6px;
                  border-radius: 6px;
                }
              }
              .percent{
                font-size: 12px;
                font-family: PingFangSC-Semibold, PingFang SC;
                font-weight: 600;
                color: #95B974;
              }
              .yearPercent{
                color: #F7C25B;
              }
              .percent_Text{
                font-size: 12px;
                font-family: PingFangSC-Regular, PingFang SC;
                font-weight: 400;
                color: #000000;
              }
            }
          }
          .month,.year{
            //width: 200px;
            //height: 240px;
            background: #F5F7FB;
            border-radius: 20px;
            padding: 30px 25px 15px;
            position: relative;
            .tag{
              width: 80px;
              height: 80px;
              background: #95B974;
              border: 11px solid #FFFFFF;
              text-align: center;
              line-height: 60px;
              font-size: 34px;
              font-family: STYuanti-SC-Regular, STYuanti-SC;
              border-radius: 50%;
              position: absolute;
              top: -20px;
              left: -11px;
            }
            .M_text1{
              font-size: 18px;
              font-family: PingFangSC-Semibold, PingFang SC;
              font-weight: 600;
              color: #666666;
              margin-top: 85px;
            }
            .M_text2{
              font-size: 10px;
              font-family: PingFangSC-Regular, PingFang SC;
              font-weight: 400;
              color: #000;
              margin-top: 5px;
              margin-bottom: 25px;
            }
            .M_num{
              font-size: 30px;
              font-family: Helvetica-Bold, Helvetica;
              font-weight: bold;
              color: #000000;
              line-height: 30px;
              margin-bottom: 15px;
              position: relative;
              padding-left: 20px;
              span{
                font-size: 18px;
                font-family: PingFangSC-Semibold, PingFang SC;
                color: #000000;
                line-height: 18px;
                position: absolute;
                left: 0;
              }
            }
          }
          .month{
            padding: 30px 25px 15px;
          }
          .year{
            //margin-left: 30px;
            .tag{
              background: #F7C25B;
            }
          }
        }
      }
    }
  }

}
</style>
